import React,{useEffect} from 'react'
import {useNavigate} from 'react-router-dom'
import {Table,Button,Modal,message} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import store from '../../../store/LeiZheng'
import { observer } from 'mobx-react-lite'

const {goods} = store
const {confirm } = Modal
export default observer(function GoodsTable() {
  const navigate = useNavigate()
  const columns = [
    {
      title: '商品id',
      dataIndex: 'id',
      key: 'id',
      align:'center',
      className:'col'
    },
    {
      title: '封面',
      dataIndex: 'imgSrc',
      key: 'imgSrc',
      render:(_,{imgSrc})=><img alt='图片裂开' src={imgSrc}/>,
      align:'center',
      className:'col'
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      align:'center',
      className:'col'
    },
    {
      title: '类目',
      dataIndex: 'goodsType',
      key: 'goodsType',
      align:'center',
      className:'col'
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      align:'center',
      className:'col'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align:'center',
      className:'col',
      render:(text,{status})=><span style={{color:status==='下架'?'red':'black'}}>{text}</span>
    },
    {
      title: '权重',
      dataIndex: 'goodsWeight',
      key: 'goodsWeight',
      align:'center',
      className:'col'
    },
    {
      title: '操作',
      key: 'action',
      align:'center',
      className:'col',
      render:(_,record)=><div><Button size='small' onClick={()=>edit(record)} type='primary'>编辑</Button><Button size='small' onClick={()=>changeStatus(record)}>{record.status==='上架'?'下架':'上架'}</Button></div>
    },
  ]
  useEffect(()=>{
    // window.location.reload()
    // goods.searchGoods('')
    if(goods.switch)
    goods.getGoodsData()
  },[])
  // const [selectGoods,setSleGoods] = useState([])
  const edit = (record)=>{
    // console.log(selectGoods,record);
    navigate('/home/goodsManagement/editgoods',{state:record})
  }
  const changeStatus = (record)=>{
    confirm({
      title: `${record.status==='上架'?'下架':'上架'}`,
      icon: <ExclamationCircleOutlined />,
      content: `您确定把状态改为${record.status==='上架'?'下架':'上架'}`,
      onOk() {
        // record.status = record.status==='上架'?'下架':'上架'
        goods.updateGoods(record)
        // message.success('OK');
      },
      onCancel() {
        message.info('取消');
      },
    });
  }

  return (
    <div className='table'>
      <Table columns={columns} dataSource={goods.tableData}
      bordered
      pagination = {
        {pageSize:6}
      }
      rowSelection={{
        type:'checkbox',
        onChange(_,rows){
          // console.log(key,rows);
          goods.setSleGoods(rows)
        }
      }}
      />
    </div>
  )
})
